import React, { JSX } from 'react';
import { NulDialog, NulCommonOperations, NulFormItem } from '../../components/NulDialog';
import { Autocomplete, FormControl, MenuItem, Select, TextField, Typography } from '@mui/material';
import { useAppDispatch, useAppSelector } from '../../actions/hooks';
import { UserEntry, int } from '../../types';
import { selectRoleLoaded, selectRoles, userManagementActions } from '../../actions/UserManagement';

interface ModifyUserProps {
  open: boolean;
  onClose: () => void;
  customerEntry: UserEntry;
}

function ModifyUser(props: ModifyUserProps): JSX.Element {
  const { open, onClose, customerEntry } = props;

  const [name, setName] = React.useState<string>(customerEntry.name);
  const [userName, setUserName] = React.useState<string>(customerEntry.userName);
  const [gender, setGender] = React.useState<int>(customerEntry.gender);
  const [role, setRole] = React.useState<string>(customerEntry.role);

  const dispatch = useAppDispatch();

  const roles = useAppSelector(selectRoles);
  const rolesLoaded = useAppSelector(selectRoleLoaded);

  React.useEffect(() => {
    setName(customerEntry.name);
    setUserName(customerEntry.userName);
    setGender(customerEntry.gender);
    setRole(customerEntry.role);
  }, [customerEntry]);

  React.useEffect(() => {
    if (!rolesLoaded) {
      dispatch(userManagementActions.getRoles());
    }
  }, [rolesLoaded, dispatch]);

  const onModifyClicked = () => {
    dispatch(userManagementActions.updateUser({
      uid: customerEntry.uid,
      name, userName, gender, role
    }));
    onClose();
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='Edit User'
      operations={
        <NulCommonOperations
          onPositiveClicked={onModifyClicked}
          onNegativeClicked={onClose}
          positiveText='Modify'
        />
      }
    >
      <NulFormItem hint='UID' necessary={false} component={
        <Typography>{customerEntry.uid}</Typography>
      } />
      <NulFormItem hint='User Name' component={
        <TextField placeholder='User Name' fullWidth={true} size='small' value={userName} onChange={(event) => { setUserName(event.target.value); }} />
      } />
      <NulFormItem hint='Name' component={
        <TextField placeholder='Name' fullWidth={true} size='small' value={name} onChange={(event) => { setName(event.target.value); }} />
      } />
      <NulFormItem hint='Gender' component={
        <FormControl fullWidth size='small'>
          <Select
            labelId="type-select-label"
            id="type-select"
            value={gender}
            placeholder="Type"
            onChange={(event) => {
              if (event.target.value === 1 || event.target.value === 2)
                setGender(event.target.value);
            }}
          >
            <MenuItem value={1}>Male</MenuItem>
            <MenuItem value={2}>Female</MenuItem>
          </Select>
        </FormControl>
      } />
      <NulFormItem hint='Role' component={
        <FormControl fullWidth size='small'>
          <Autocomplete
            options={roles}
            size='small'
            fullWidth={true}
            getOptionLabel={option => option}
            renderInput={(params) => <TextField {...params} />}
            value={role}
            onChange={(event, value) => {
              setRole(value ?? '');
            }}
          />
        </FormControl>
      } />
    </NulDialog>
  );
}

export { ModifyUser };